<template>
    <el-dialog
      :title="`${add ? '新增' : '编辑'}${type == 1 ? '入库记录' : '出库记录'}`"
      :visible.sync="dialogVisible"
      width="90%"
      top="5vh"
      append-to-body
      @close="handleClose"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="ware-edit-from"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="物料编码" prop="materialCode">
              <el-input v-model="form.materialCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料类型" prop="materialTypeName">
              <el-input v-model="form.materialTypeName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号" prop="spec">
              <el-input v-model="form.spec" disabled />
            </el-form-item>
          </el-col>
  
          <el-col :span="8">
            <el-form-item label="计量单位" prop="unitName">
              <el-input v-model="form.unitName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="type == 1 ? `进场单号` : '出场单号'"
              prop="code"
            >
              <el-input v-model="form.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="type == 1 ? `入库数` : '出库数'"
              prop="actualCount"
            >
              <el-input-number v-model="form.actualCount" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="出场图片" prop="EnterRef">
              <ImageUpload ref="EnterRef"></ImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
  
        <el-form-item label="收货人" prop="consignee">
          <el-input v-model="form.consignee" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle">确 定</el-button>
      </span>
    </el-dialog>
  </template>
  <script>
  import { inMaterial, outMaterial } from "@/api/materialEnter";
  import ImageUpload from "@/components/ImageUpload/index.vue";
  
  export default {
    components: { ImageUpload },
    data() {
      return {
        obj: null,
        add: true,
        type: 1,
        form: {
          id: "",
          actualCount: 0,
        },
        rules: {
          enterTime: [
            { required: true, message: "请输入进场时间", trigger: "blur" },
          ],
          actualCount: [
            { required: true, message: "请输入数量", trigger: "blur" },
          ],
        },
        dialogVisible: false,
      };
    },
    methods: {
      handleClose() {
        this.$refs.form.resetFields();
        this.row = null;
        this.dialogVisible = false;
      },
      openHandle(obj) {
        this.type = obj.type;
        this.add = obj.add;
        if (obj.editForm) {
          this.form = obj.editForm;
        } else {
          this.form = {
            materialName: obj.parent.materialName,
            materialCode: obj.parent.materialCode,
            materialTypeName: obj.parent.materialTypeName,
            spec: obj.parent.spec,
            unitName: obj.parent.unitName,
          };
          this.form.id = undefined;
        }
        this.dialogVisible = true;
        this.$nextTick(() => {
          if (this.type == 1 && !this.add && obj.editForm) {
            this.$refs.StandardRef.setUrl(obj.editForm.qualificationLink);
            this.$refs.EnterRef.setUrl(obj.editForm.imageLink);
          } else {
            this.$refs.StandardRef.setUrl("");
            this.$refs.EnterRef.setUrl("");
          }
        });
  
        if (this.type == 2) {
          this.rules.enterTime = [
            { required: true, message: "请输入出场时间", trigger: "blur" },
          ];
        }
        this.obj = obj;
      },
      submitHandle() {
        let method = undefined;
        if (this.type === 1) {
          method = inMaterial;
        } else {
          method = outMaterial;
        }
        this.$refs.form.validate((valid) => {
          if (valid) {
            const submitParam = { ...this.form };
            if (this.type == 1) {
              submitParam.qualificationLink = this.$refs.StandardRef.getUrl();
              submitParam.imageLink = this.$refs.EnterRef.getUrl();
            }
            let message = `${this.add ? "新增" : "编辑"}${
              this.type == 1 ? "入库记录" : "出库记录"
            }`;
            method(submitParam).then((res) => {
              const { success,errorMsg } = res;
              if (success) {
                this.$message.success(`${message}成功`);
                this.$emit("submit");
                this.dialogVisible = false;
              } else {
                this.$message.error(`${message}失败，${errorMsg}`);
              }
            });
          }
        });
      },
    },
  };
  </script>
  <style>
  .ware-edit-from {
    height: 75vh;
    overflow: auto;
     /* 针对Webkit内核的浏览器 */
     &::-webkit-scrollbar {
          /* 设置滚动条的宽度 */
          width: 8px;
        }
  
        /* 滚动条轨道 - 背景颜色/白底 */
        &::-webkit-scrollbar-track {
          background: #F5F7FA;
          border-radius: 10px;
        }
  
        /* 滚动条的滑块部分 */
        &::-webkit-scrollbar-thumb {
          background: #C0C4CC;
          border-radius: 10px;
        }
  
        /* 当鼠标悬停在滚动条滑块上时改变颜色 */
        &::-webkit-scrollbar-thumb:hover {
          background: #C0C4CC;
        }
  }
  </style>
  